<!-- 151/266/267 组件-->
<template>
	<div>
		<a-space class="common-button-group">
			<a-button
				type="primary"
				:loading="searchBtnLoading"
				@click="handleSearch"
				>{{ $t('common_query') }}</a-button
			>
		</a-space>
		<t-query-form
			layout="inline"
			group="tabPallet"
			ref="queryForm"
			:rules="rules"
			:model="queryForm"
		>
			<a-form-item :label="$t('T9_shopId')" name="shopId">
				<a-select
					v-model:value="queryForm.shopId"
					:placeholder="$t('common_pleaseSelect')"
					class="select-width"
				>
					<a-select-option
						v-for="item in options.shopIdList"
						:key="item.value"
						:value="item.value"
						>{{ item.label }}</a-select-option
					>
				</a-select>
			</a-form-item>
			<a-form-item :label="$t('T9_palletId')" name="palletId">
				<a-input
					v-model:value="queryForm.palletId"
					allow-clear
					class="select-width"
					:placeholder="$t('common_pleaseEnter1')"
				/>
			</a-form-item>
		</t-query-form>
    <a-descriptions
			bordered
			:column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
		>
			<a-descriptions-item v-for="(val,key) in info" :key="key" :label="$t(`T9_${key}`)">
        {{val}}
      </a-descriptions-item>
		</a-descriptions>
    <a-row
			type="flex"
			justify="space-between"
			align="middle"
			class="global-oper-row mt-1"
		>
			<a-col :span="15" class="global-oper-row-title">{{
				$t('T9_palletBoxList')
			}}</a-col>
			<a-col :span="8" class="global-oper-row-extra">
				<a-button>{{ $t('T9_toExcel') }}</a-button>
			</a-col>
		</a-row>
    <t-table
      :loading="palletBoxList.loading"
      :data="palletBoxList.tableData"
      max-height="200"
      :menu-config="tableMenu"
      @menu-click="handleClickTableMenu">
      <t-column field="boxId" :title="$t('T9_boxId')" />
      <t-column field="capacity" :title="$t('T9_capacity')" />
      <t-column field="panelQty" :title="$t('T9_panelQty')" />
      <t-column field="productId" :title="$t('T9_productId')" />
      <t-column field="owner" :title="$t('T9_owner')" />
      <t-column field="ownerType" :title="$t('T9_ownerType')" />
      <t-column field="grade" :title="$t('T9_grade')" />
      <t-column field="operation" :title="$t('T9_operation')" />
      <t-column field="createTime" :title="$t('T9_createTime')" />
    </t-table>
    <a-row
			type="flex"
			justify="space-between"
			align="middle"
			class="global-oper-row mt-1"
		>
			<a-col :span="15" class="global-oper-row-title">{{
				$t('T9_panelList')
			}}</a-col>
			<a-col :span="8" class="global-oper-row-extra">
				<a-button>{{ $t('T9_toExcel') }}</a-button>
			</a-col>
		</a-row>
    <t-table
      :loading="panelList.loading"
      :data="panelList.tableData"
      max-height="300"
      >
      <t-column field="boxId" :title="$t('T9_boxId')" />
      <t-column field="panelId" :title="$t('T9_panelId')" />
      <t-column field="productId" :title="$t('T9_productId')" />
      <t-column field="productVer" :title="$t('T9_productVer')" />
      <t-column field="slot" :title="$t('T9_slot')" />
      <t-column field="productState" :title="$t('T9_productState')" />
      <t-column field="processState" :title="$t('T9_processState')" />
      <t-column field="productReasonCode" :title="$t('T9_productReasonCode')" />
      <t-column field="productType" :title="$t('T9_productType')" />
      <t-column field="glassGrade" :title="$t('T9_glassGrade')" />
      <t-column field="glassHoldState" :title="$t('T9_glassHoldState')" />
      <t-column field="multiOwnerId" :title="$t('T9_multiOwnerId')" />
      <t-column field="shortCutFlag" :title="$t('T9_shortCutFlag')" />
    </t-table>
	</div>
</template>

<script>
  import { defineComponent } from 'vue'
  import initOptionsMixin from '@/mixins/initOptionsMixin'
  import { shopIdList } from '@/views/options'
  import * as api from '@/api/common'

  export default defineComponent({
    name: 'Pallet',
    components: {},
    mixins: [initOptionsMixin],
    emits: ['handleChangeTab'],
    data() {
      return {
        tableMenu: {
          body: {
            options: [
              [
                { code: 'viewBoxInformation', name: 'View Box Information' }
              ]
            ]
          }
        },
        searchBtnLoading: false,
        queryForm: {
          shopId: undefined,
          palletId: ''
        },
        options: {
          shopIdList
        },
        info: {
          palletId: '',
          palletShipId: '',
          grade: '',
          capacity: '',
          boxQty: '',
          packinguser: '',
          packingtime: '',
          destination: '',
          route: '',
          operation: '',
          bankId: '',
          zoneId: '',
          location: '',
          processState: '',
          owner: '',
          state: '',
          destinationFa: ''
        },
        panelList: {
          loading: false,
          tableData: [],
          basicParams: {
            queryId: 'GetProcessGroupList',
            version: '80002',
            dtoName: 'PalletInformationDTO',
            menuName: 'viewBoxPalletInformation',
            usage: 'getPallet',
            materialType: 'Product',
            site: ''
          }
        },
        palletBoxList: {
          loading: false,
          tableData: [],
          basicParams: {
            queryId: 'GetProcessGroupList',
            version: '80002',
            dtoName: 'PalletBoxListDTO',
            menuName: 'viewBoxPalletInformation',
            usage: 'getPalletBoxList',
            materialType: 'Product',
            site: ''
          }
        },
        rules: {
          shopId: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ],
          palletId: [
            {
              required: true,
              message: this.$t('valid_required'),
              trigger: 'blur'
            }
          ]
        }
      }
    },
    computed: {},
    created() {

    },
    methods: {
      handleClickTableMenu({ row }) {
        // 因为页面已合并，故直接切换页签
        this.$emit('handleChangeTab', { key: 'Box', params: { id: row.boxId } })
      },
      getTableList(type = 'palletBox') {
        this[`${type}List`].loading = true
        const params = { ...this[`${type}List`].basicParams, ...this.queryForm }
        return api
          .getList(params)
          .then((res) => {
            this[`${type}List`].loading = false
            if (type === 'palletBox') {
              this.palletBoxList.tableData = res || []
            } else {
              this.panelList.tableData = res.palletListDTOList || []
              Object.assign(this.info, res.palletBoxInformationDTO)
            }
          })
          .catch((error) => {
            this[`${type}List`].loading = false
            console.error(error)
          })
      },
      handleSearch() {
        this.$refs.queryForm
          .validate()
          .then(() => {
            if (this.searchBtnLoading) return
            this.searchBtnLoading = true
            Promise.all([
              this.getTableList('palletBox'),
              this.getTableList('panel')
            ]).then(() => { this.searchBtnLoading = false })
          })
          .catch((error) => {
            console.log('error', error)
          })
      }
    }
  })
</script>
<style lang='less' scoped>
.select-width {
	width: 120px;
}
</style>
